<template>
  <div class="home-container">
    <div class="menu">
        <el-menu
            router
            default-active="/home/statistics"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-submenu index="1">
            <template v-slot:title>
              <i class="el-icon-setting"></i>
              <span>首页统计</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/statistics">首页统计</el-menu-item>
            </el-menu-item-group>

          </el-submenu>
          <el-submenu index="2">
            <template v-slot:title>
              <i class="el-icon-setting"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/userList">用户列表</el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <el-submenu index="3">
            <template v-slot:title>
              <i class="el-icon-setting"></i>
              <span>分类管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/category">分类列表</el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <el-submenu index="4">
            <template v-slot:title>
              <i class="el-icon-setting"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/goodList">商品列表</el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <el-submenu index="5">
            <template v-slot:title>
              <i class="el-icon-setting"></i>
              <span>评价管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/review">评价列表</el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <el-submenu index="6">
            <template v-slot:title>
              <i class="el-icon-setting"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/order">订单列表</el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <el-submenu index="7">
            <template v-slot:title>
              <i class="el-icon-setting"></i>
              <span>轮播管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/swiper">轮播列表</el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <el-submenu index="8">
            <template v-slot:title>
              <i class="el-icon-setting"></i>
              <span>菜单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/menu">菜单列表</el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <el-submenu index="9">
            <template v-slot:title>
              <i class="el-icon-setting"></i>
              <span>权限管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-2">权限列表</el-menu-item>
            </el-menu-item-group>

          </el-submenu>






        </el-menu>

      </div>
    <div class="header">
      <el-header style=" font-size: 12px">
        <el-dropdown>
          <i class="el-icon-arrow-down" style="margin-right: 15px"></i>
          <span>王小虎</span>
           <template v-slot:dropdown>
             <el-dropdown-menu>
               <el-dropdown-item>查看</el-dropdown-item>
               <el-dropdown-item>新增</el-dropdown-item>
               <el-dropdown-item>删除</el-dropdown-item>
             </el-dropdown-menu>
           </template>
        </el-dropdown>
      </el-header>

    </div>
    <div class="main">
       <router-view></router-view>
    </div>

    </div>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style scoped lang="css">
.home-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.menu{
  width: 15%;
  height: 100%;
}
.el-menu{
  width: 100%;
  height: 100%;
  background-color: #545c64;

}
.header{
  height: 60px;
  width: 85%;
}
.el-header{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #eeeeee;
}
.main{
  /*height: 100%;*/
  width: 85%;
  position: absolute;
  top: 60px;
  left: 15%;
}
.el-main{
  width: 100%;
}

</style>